import { Modal, Tag, Drawer, Button, message } from 'antd'
import ExcelTable from '@components/exportExcel'
import LogForm from '@/pages/setting/logManage/components/LogForm'
import { useRef, useState } from 'react'
import { ActionType, ProFormInstance } from '@ant-design/pro-components'
import { getLogList, getLogInfo, delLog } from '@/apis/accessManagement/log'
import dayjs from 'dayjs'
const SystemLog: React.FC = () => {
  useRef<ActionType>()
  useRef<ProFormInstance>()
  const [tableItem, setTableItem] = useState()
  const [detailDrawer, setDetailDrawer] = useState(false)
  const [messageApi, contextHolder] = message.useMessage()
  function showAddDrawer(item: any) {
    setTableItem(item)
    setDetailDrawer(true)
  }

  function onCloseDrawer() {
    setDetailDrawer(false)
  }
  return (
    <>
      {contextHolder}
      <ExcelTable
        // actionRef={actionRef}
        requestFn={async params => {
          const {
            pageNum,
            pageSize,
            opUser = '',
            opTitle = '',
            roleCode,
            opTime = [],
            ...newParams
          } = params // 处理所需参数名
          const data = await getLogList({
            ...newParams,
            pagination: { pageNumber: pageNum, showNumber: pageSize },
            opUser: opUser,
            opTitle: opTitle,
            startTime: opTime.length > 0 ? opTime[0] : '',
            endTime: opTime.length > 0 ? opTime[1] : ''
          })

          return data
        }}
        rowSelection={false}
        toolBarRenderFn={() => []}
        columns={[
          {
            title: '操作人',
            dataIndex: 'opUser'
          },
          {
            title: '操作模块',
            render(_dom, entity) {
              const match = entity?.reqPath.match(/^\/([^/]+)/) // 匹配第一个斜杠到第二个斜杠之间的内容
              const result = match ? match[1] : null
              return <div>{result}</div>
            },
            hideInSearch: true
          },
          {
            title: '操作内容',
            dataIndex: 'opTitle',
            hideInSearch: true,
            render(_dom, entity) {
              const match = entity?.reqPath.match(/^\/[^/]+(\/.*)/) // 匹配第二个斜杠后的内容
              const result = match ? match[1] : null
              return <div>{result}</div>
            }
          },
          // {
          //   title: '操作ip',
          //   dataIndex: 'opIp',
          //   hideInSearch: true
          // },
          {
            title: '操作设备',
            dataIndex: 'browserInfo',
            ellipsis: true,
            hideInSearch: true
          },
          {
            title: '操作状态',
            dataIndex: 'returnMsg',
            hideInSearch: true,
          },
          {
            title: '更新时间',
            dataIndex: 'opTime',
            valueType: 'dateRange',
            render(_, record) {
              return record ? dayjs(record.opTime).format('YYYY-MM-DD HH:mm:ss') : '-'
            }
          }
          //   {
          //     title: '操作',
          //     key: 'option',
          //     valueType: 'option',
          //     render: (_, record) => [

          //     ]
          //   }
        ]}
      />
      <Drawer title="详情" onClose={onCloseDrawer} open={detailDrawer} destroyOnClose>
        <LogForm item={tableItem} onClose={onCloseDrawer}></LogForm>
      </Drawer>
    </>
  )
}

export default SystemLog
